<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>随机练习</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <meta name="format-detection" content="telephone=no">
  <meta name="renderer" content="webkit">
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <link rel="stylesheet" href="<%=basePath%>resources/css/amazeui.min.css"/>
  <style>
    .header {
      text-align: center;
    }
    .header h1 {
      font-size: 200%;
      color: #333;
      margin-top: 30px;
    }
    .header p {
      font-size: 14px;
    }
    .cm-cf {
      margin : 0 auto;
    }
    .demo-bar h1 {
      margin: 0;
      text-align: center;
      font-weight: 400;
      font-size: 20px;
    }
    .am-pagination {
      margin-top: 50px;
      text-align: center;
    }
    .exam-hint {
      display: none;
    }
    h1 {
      margin-top :1em;
    }
  </style>
  <!--
  <script type="text/javascript" src="<%=basePath%>resources/js/jquery/jquery-1.9.0.min.js"></script>
  <script type="text/javascript" src="<%=basePath%>resources/js/amazeui.min.js"></script>
  -->
  <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://cdn.amazeui.org/amazeui/2.4.2/js/amazeui.min.js"></script>
  <script src="http://cdn.amazeui.org/amazeui/2.4.2/js/amazeui.widgets.helper.min.js"></script>
  <script type="text/javascript" src="<%=basePath%>resources/js/xml.js"></script>
  
</head>
<body class="am-with-fixed-navbar">
  <header data-am-widget="header" class="am-header am-header-default">
      <div class="am-header-left am-header-nav">
          <a href="<%=basePath%>mobile/home" class=""><i class="am-header-icon am-icon-home"></i></a>
      </div>
      <h1 class="am-header-title">
          考试系统
      </h1>
      <div class="am-header-right am-header-nav">
          <a href="<%=basePath%>mobile/usercenter" class=""><i class="am-header-icon am-icon-user"></i></a>
      </div>
  </header>
  <div class="page pg-demo">
    <!-- <header class="demo-bar">
      <h1>考试系统</h1>
    </header> -->
    <div id="demo-view" data-backend-compiled="">
      <h1><a href="#" class="am-icon-btn am-success am-icon-shield"></a>  错题练习</h1>
      <hr data-am-widget="divider" style="" class="am-divider am-divider-default" />
      <!-- 内容 -->
      <div class="exam-question">
      </div>
      <div class="exam-hint am-alert am-alert-danger">
      </div>
    </div>
    <div>
      <ul class="am-pagination">
        <li class="am-pagination-prev">
          <a href="#" onclick="pre();">上一题</a>
        </li>
        <li>
          <button type="button" class="am-btn am-btn-success" onclick="submit();">提  交</button>
        </li>
        <li class="am-pagination-next">
          <a href="#" onclick="next();">下一题</a>
        </li>
      </ul>
    </div>
  </div>
</body>
<script>
  var datas = [];
  var current_index = 0;
  function load(){  
    $.ajax({
      url : "<%=basePath%>mobile/practice_incorrect",
      type : "GET",
      success : function(response,status){
        datas = response;        
        $(".exam-question").html(genHtml());        
      }
    })
  }
  
  function genHtml(){
    var index  = current_index;
    var data = datas[index];
    $(".exam-hint").hide();
    //判断
    if(data.questionTypeId == '3'){
      return genHtmlJudge(index,data);
    }else if(data.questionTypeId == '1'){
      return genHtmlSelect(index,data);
    }
    
  }
  
  load();
  
  function genHtmlJudge(index,data){
    var question = xml.xmlToJSON(data.content);
    var question = xml.xmlToJSON(data.content);
    var html = '';
    //标题
    html += '<div class="am-list-news-hd am-cf">';
    html += '<h2 style="float:none;">' + (parseInt(index)+1) + '. ' + question.QuestionContent.title.Text + '</h2>';
    html += '</div>';
    //图片
    if(question.titleImg){
      html += '<div class="am-list-thumb am-u-sm-12">';
      html += '<img style="width:100%;" src="' + question.QuestionContent.titleImg + '" />';
      html += '</div>';
    }
    html += '<div><h3>&nbsp;</h3></div>';
    
    html += '<label class="am-radio">';
    html += '<input type="radio" name="_answer" value="T" class="am-ucheck-radio">正确';
    html += '<span class="am-ucheck-icons"><i class="am-icon-unchecked"></i><i class="am-icon-checked"></i></span>';
    html += '</label>';
    html += '<label class="am-radio">';
    html += '<input type="radio" name="_answer" value="F" class="am-ucheck-radio">错误';
    html += '<span class="am-ucheck-icons"><i class="am-icon-unchecked"></i><i class="am-icon-checked"></i></span>';
    html += '</label>';
    return html;
    
  }
  function genHtmlSelect(index,data){
    var question = xml.xmlToJSON(data.content);
    var html = '';
    //标题
    html += '<div class="am-list-news-hd am-cf">';
    html += '<h2 style="float:none;">' + (parseInt(index) + 1) + '. ' + question.QuestionContent.title.Text + '</h2>';
    html += '</div>';
    //图片
    if(question.titleImg){
      html += '<div class="am-list-thumb am-u-sm-12">';
      html += '<img style="width:100%;" src="' + question.QuestionContent.titleImg + '" />';
      html += '</div>';
    }
    html += '<div><h3>&nbsp;</h3></div>';
    //选项
    for(i in question.QuestionContent.choiceList.entry){
      var item = question.QuestionContent.choiceList.entry[i];
      html += '<label class="am-radio">';
      html += '<input type="radio" name="_answer" value="' + item.string[0].Text + '" class="am-ucheck-radio">';
      html += '<span class="am-ucheck-icons"><i class="am-icon-unchecked"></i><i class="am-icon-checked"></i></span>';
      html += item.string[0].Text + '. ' +  item.string[1].Text;
      html += '</label>';
    } 
    return html;
  }
  function submit(){
    var data = datas[current_index];
    var myanswer = $('input[name="_answer"]:checked').val();
    var tmp_answer = data.answer;
    if(!myanswer){
      exam_hint("danger","请填写答案");
    }    
    else if(data.answer != myanswer){
      if(data.questionTypeId == '3'){
        if(data.answer == 'F'){
          tmp_answer = '错误';
        }else{
          tmp_answer = '正确';
        }
      }
      exam_hint("danger","正确答案：" + tmp_answer);
    }else{
      exam_hint("success","回答正确");
    }
  }
  function exam_hint(type,msg){
    type = type || "alert";
    $(".exam-hint").attr("class","exam-hint am-alert am-alert-" + type);
    $(".exam-hint").html(msg);
    $(".exam-hint").show();
  }
  function next(){
    if(current_index == datas.length){
      return;
    }
    current_index++;
    $(".exam-question").html(genHtml());
  }
  function pre(){
    if(current_index == 0){
      return;
    }
    current_index--;
    $(".exam-question").html(genHtml());
  }
</script>
</html>